<template>
  <div class="container">
    <div class="titleContent">{{title}}</div>
    <div class="titleTime">{{created_at}}</div>
    <!-- <wxParse :content="content"/> -->
	<div class="rich-text">
		<rich-text :nodes="content"></rich-text>
	</div>
 <!--    <ul>
      <li class="good" @click="setGood">
        <img :src="like?'http://file.rzkeji.com/web/loveciy/img/circle/backLove.png' : 'http://file.rzkeji.com/web/loveciy/img/circle/love.png'"/>
        <span>{{like_num}}</span>
      </li>
      <li class="share">
        <button open-type="share">
          <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/>
          <span>分享</span>
        </button>
      </li>
    </ul> -->
    <!-- <div class="readNumber">阅读:{{read_num}}人</div> -->
    <img :src="bannerImg.img_url != null ? bannerImg.img_url : ''" class="details" @click="goDetails(bannerImg.link_url)"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
  </div>
</template>

<script>
export default {
  components: {
  },

  data () {
    return {
      content:"<p>载入文章...</p>",
      title:"",
      created_at:"",
      read_num:"",
      like_num:"",
      id:"",
      bannerImg:"",
      like:""
    }
  },
  methods:{
    setGood(){
      var _this=this;
      var userToken=wx.getStorageSync('userToken');
      _this.$request.postData("https://h5.rzkeji.com/api/other/set-like-article",{id:_this.id,user_token:userToken}).then(res =>{
        var res=res.data.data;
        if(res=="add_like")
        {
          _this.like=1;
          _this.like_num++;
        }else{
          _this.like=0;
          _this.like_num--;
        }
      })
    },
    goDetails(src)
    {
      this.$currency.goDetails(src)
    },

  },
  onLoad (options) {
    var _this=this;
    wx.showLoading({
        title:'文章加载中...'
    })
	if(options.url != undefined){
	   _this.id=decodeURIComponent(options.url).split("?id=")[1];
	}else {
	   _this.id=options.id
	}
  },
   async onShow(){
    var _this=this;
    var userToken=wx.getStorageSync('userToken');
    var articleData=await _this.$request.getData("https://h5.rzkeji.com/api/other/get-article-info",{id:_this.id,user_token:userToken})
    var res=articleData.data.data;
    if(res!=null){
      [_this.content,_this.title,_this.created_at,_this.read_num,_this.like_num,_this.like]=[res.content,res.title,res.created_at,res.read_num,res.like_num,res.is_my_like]

	 _this.content=res.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
	  _this.bannerImg=res.banner;
    }else{
        [_this.content,_this.title,_this.created_at,_this.read_num,_this.like_num,_this.like]=["<p>正在载入文章...</p>","","","","",""]
        _this.bannerImg="";
    }
    _this.$nextTick(()=>{
        wx.hideLoading();
    })
  },
  onShareAppMessage(res) {
    var path="/pages/drawList/articleDetails/articleDetails?id="+this.id
    // this.$currency.share(res,'商品详情页',path)
    return {
      title:'文章详情',
      path:path,
      success(res){
        wx.showToast({
          title:"转发成功",
        })
      }
    }
  }
}
</script>

<style scoped>
.container{width: 96%;margin-left: 2%;overflow-x: hidden;margin-bottom: 55px;}
.titleContent{width: 98%;line-height: 30px;font-size: 20px;padding: 1%;}
.titleTime{width: 100%;height: 25px;line-height: 25px;font-size: 16px;color: #9d9d9d;margin-bottom: 10px;}
ul{width: 165px;height: 60px;display: flex;justify-content: row;margin:80px auto 10px auto;}
li{margin-left: 17px;border: 0.2px solid #999999;}
li img{width: 25px;height: 25px; display: block; margin: 0px auto;margin-top: 10px;}
li span{width: 60px;height: 20px;line-height: 20px;display: block;text-align: center;font-size: 13px;}
.good{width: 60px;height: 60px;border: 0.2px solid gray;border-radius: 60px;}
.share{width: 60px;height: 60px;border: 0.2px solid #747070;border-radius: 60px;margin-left: 10px;}
.readNumber{width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 16px;color: #666666;margin-bottom: 36px;}
.footer{width: 100%;height: 36px;display: block;margin-bottom:65px}
.details{width: 96%;margin-left:2%; height: 157px;}
.share button{width: 60px;height: 60px;margin-left: 0px;background: transparent;font-size: 14px;padding:0;line-height: 40px;}
.share button::after{border:none;}   /*初始化button的样式*/
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius:50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 135px;background: rgba(0,0,0,0.5);border-radius: 50px;}
</style>
<style>
	.rich-text rich-text{
		padding:20rpx;
		overflow: auto;
		display: block;
	}
	
	.rich-text rich-text img{
		max-width:100% !important;
	}
</style>
